<template>
    <div>
        <user-heads-info></user-heads-info>
        <p class="note-text">对您的信息有疑问  查看<span>个人信息</span></p>
        <div class="footer-divs">
            <div class="wallet">
                <div class="left">
                    <p class="left-title">可用余额</p>
                    <p class="left-num">1000.00</p>
                    <router-link to="/fastcharge" class="fast-charge">快速充值</router-link>
                </div>
                <div class="right">
                    <span>钱包</span>
                    <img src="../assets/right-gray.png" alt="">
                </div>
            </div>
            <div class="footer-bottom">
                <div class="left">
                    <div class="left">
                        <p class="left-title">我的收藏</p>
                        <p class="left-num">23</p>
                        <p class="left-text">套设计图</p>
                    </div>
                    <div class="right">
                        <img src="../assets/right-gray.png" alt="">
                    </div>
                </div>
                <div class="right">
                    <div class="left">
                        <p class="left-title">共享工具箱</p>
                        <p class="left-num">00:55:66</p>
                        <p class="left-text">正在使用</p>
                    </div>
                    <div class="right">
                        <img src="../assets/right-gray.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import userHeadsInfo from './common/UserHeadsInfo'
export default {
    name:'userCenter',
    components:{
        userHeadsInfo
    }
}
</script>

<style scoped>
.note-text{
    width: 176px;
    margin: 0 auto;
    font-size: 12px;
    color: #CBC6C0;
    letter-spacing: 0;
    margin-top: 20px;
}
.note-text span{
    text-decoration: underline;
}
.footer-divs{
    width: 100%;
    position: absolute;
    bottom:0;
    height: 245px;
}
.wallet{
    width: 100%;
    height: 120px;
    background: #C2B4AB;
    display: flex;
}
.wallet .left{
    flex: 1;
    padding-left:15px;
}
.left-title{
    margin-top:20px;
    line-height: 20px;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 0;
}
.left-num{
    line-height: 42px;
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: 0;
}
.left-text{
    line-height: 18px;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
}
.fast-charge{
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-decoration: underline;
}
.wallet .right{
    flex: 1;
    line-height: 120px;
    text-align: right;
    padding-right: 15px;
}
.wallet .right span{
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 0;
}
.wallet .right img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.footer-bottom{
    width: 100%;
    height: 120px;
    margin-top:5px;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
}
.footer-bottom .left{
    height: 120px;
    width: 49.5%;
    background: #CBC7BE;
    display: flex;
}
.footer-bottom .left .left{
    flex: 3;
    flex-direction: column;
    padding-left:15px;
}
.footer-bottom .left .right{
    justify-content: center;
    align-items: center;
    flex: 1;
}
.footer-bottom .left .right img{
    width: 16px;
    height: 16px;
}
.footer-bottom .right{
    height: 120px;
    width: 49.3%;
    background: #CBC7BE;
    display: flex;
}
.footer-bottom .right .left{
    flex: 3;
    flex-direction: column;
    padding-left:15px;
}
.footer-bottom .right .right{
    justify-content: center;
    align-items: center;
    flex: 1;
}
.footer-bottom .right .right img{
    width: 16px;
    height: 16px;
}
</style>

